/**
 * 我的授权
 * @author zhangqiang
 * @date   2016/11/15
 */
import {health} from "../const/health";
import {prefix} from "../const/prefix";
import NoData from "../components/NoData";
import PullRefresh from "../components/mui/PullRefresh.js";

(function( lf, r) {
    var api = health.api,
        apiUrl = prefix.oldpeople,
        ajax = lf.utils.ajax,
        RC= r.createClass,
        getUrlParam = lf.utils.getUrlParam,
        doAction = lf.bridgeJs.doAction;

    var ListGroup = RC({
        getInitialState: function () {
            return ({
                noData: {
                    span_text: '没有该用户哦',
                },
                user:'',
            });
        },

        render: function () {
            var setList =  this.props.data.map(function (data) {
                return (
                    <List data={data} />
                )
            })
                return (
                    <div className="list-group" id="listGroup">
                        {setList}
                    </div>
                )
        }
    });
    var List = RC({
        getInitialState: function () {
            return ({
                info: true,
            });
        },
        render: function () {
            console.log(this.props.user)
            var data = this.props.data,
                text = '',
                typeClass = '';
            console.log(data)
            if(this.props.data.healthGrantauthId == null){
                text = '授权';
                typeClass = 'text-dot';
            }else{
                text = '已授权';
                typeClass = 'text-add';
            }
            return(
                <a className="list mui-table-view" href="javascript:;" >
                    <div className="head-img">
                        <img src={'http://wuye.oss-cn-' +data.avatarUrl} alt=''/>
                    </div>
                    <div className={"mui-btn "+(typeClass)}  ref="toDetail">{text}</div>
                    <div className="list-title">
                        <p className="list-text">{data.recipientName}</p>
                    </div>
                </a>
            )
        },

        componentDidMount: function () {
            r.findDOMNode(this.refs.toDetail).addEventListener('tap', function () {///点击授权按钮
                let typeId= this.props.data.useridRecipient;//授权
                let typeNo= this.props.data.healthGrantauthId;//取消授权
                console.log(typeNo)

                if(this.state.info){
                    if(!typeNo){
                        this. healthGrant(typeId)//授权
                    }
                    this.setState({
                        info:false
                    })
                }
            }.bind(this));
        },
        healthGrant: function(typeId){///点击授权按钮
            ajax({
                type: 'post',
                url: apiUrl + api.grantHealth,
                data: {
                    useridGrant:getUrlParam('useridGrant'),//列表获取'8af41b8e56b5205b0156b56dc6e4000d'
                    useridRecipient:typeId,
                    recipientType:1,
                },
                success: function (data) {
                    if(data.code == '200'){
                        mui.toast('授权成功!');
                        $('.mui-btn').addClass('text-add').text('已授权');
                    }

                }
            })
        },

    });

    var Root = r.createClass({
        getInitialState: function () {
            return {
                data:[],
                user:''
            }
        },

        getList: function () { ///利用手机号码查找用户
            var me = this;
            ajax({
                type: 'get',
                url: apiUrl + api.mobile,
                data: {
                    phone: $('.text-input').val(), //15902061361
                    staffId: this.props.user.id, // //this.state.user.id,'8af41b8e56b5205b0156b56dc6e4000d'
                },
                success: function (data) {
                    console.log(data)
                    if(data.length){
                        me.setState({data:data})
                    } else{
                        mui.toast('该用户不存在');
                    }

                }
            });
        },

        componentWillMount: function () {
        },

        componentDidMount: function () {
            r.findDOMNode(this.refs.search).addEventListener('tap', function () {
                var telNum = $('.text-input').val(),
                    regPhone = /^0?1[3|4|5|7|8][0-9]\d{8}$/,
                    regHome = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
                if (regPhone.test(telNum)|| regHome.test(telNum)) {
                    this. getList()
                    mui.toast('查找中...');
                }
                else {
                    $('.text-input').val('');
                    mui.toast('手机号码格式错误');
                }
            }.bind(this));
        },

        render: function () {
            return (
                <div className="mobile-list">
                    <div className="mui-input-row">
                        <input type="text" className="text-input" placeholder="请输入手机号码"/>
                        <i className="mui-icon mui-icon-search search" ref = "search"></i>
                    </div>
                    <ListGroup data={this.state.data} user = {this.props.user}/>
                </div>
            )
        },
    });

    //TODO 在最外层getUser,参考 approval-list
    lf.appJs.getUser(userInfo => {
        var me = this;
        lf.appJs.refresh(() => this.getList());
        r.render(
            <Root user = {userInfo}/>,
            document.getElementById('root'), function () {
                $('#root').css('background', 'f2f2f2');
            }
        )
    });

})(liefeng, React)